<template>
    <div class="header clearfix">

        <div class="total-row fl">
            <span class="fl item fs-36 total-title">{{data.title}}</span>
            <span class="fl item" :hidden="data.hiddenCount"><span class="fs-16">总库存/盘</span><span class="fs-36 fc-1">{{data.bwTotalNum + data.lcTotalNum}}</span></span>
            <span class="fl item" :hidden="data.hiddenCount"><span class="fs-16">保温区库存/盘</span><span class="fs-36 fc-2">{{data.bwTotalNum}}</span></span>
            <span class="fl item" :hidden="data.hiddenCount"><span class="fs-16">冷库库存/盘</span><span
                    class="fs-36 fc-3">{{data.lcTotalNum}}</span></span>
        </div>
        <div class="time fr">{{time}}</div>
    </div>
</template>
<script>
    import {formatDate} from '@/util'

    export default {
        data() {
            return {
                time: formatDate(null, 'yyyy年MM月dd日 hh:mm:ss')
            }
        },
        props: {
            data: {
                type: Object,
                default: () => {
                    return {message: 'hello'}
                }
            }
        },
        mounted() {
            this.timer = setInterval(()=> {
                this.time = formatDate(null, 'yyyy年MM月dd日 hh:mm:ss');
            }, 1000)
        },
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>
<style lang="less">
    .total-title {
        color: rgb(64, 225, 253);
    }

    .header {
        height: 72px;
        line-height: 72px;
        .total-row {
            color: rgba(255, 255, 255, .8);

            .item {
                padding-right: 30px;

                .fs-16 {
                    padding-right: 12px;
                }
            }
        }

        .time {
            font-size: 16px;
            color: rgba(255, 255, 255, .6)
        }
    }
</style>
